<template>
	<view class="photo-add-container">
		<uni-section title="基本信息" type="line">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="form" :modelValue="recordPhoto">
					<uni-forms-item label="类型" name="photoType">
						<uni-data-select v-model="recordPhoto.photoType" :localdata="dictPhotoType" @change="change"
							label="资产类型选择">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="名称" name="name">
						<uni-easyinput v-model="recordPhoto.name" placeholder="请输入名称" />
					</uni-forms-item>
					<uni-forms-item label="时间" name="photoTime">
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="recordPhoto.photoTime" />
					</uni-forms-item>
					<uni-forms-item label="备注">
						<uni-easyinput type="textarea" v-model="recordPhoto.remark" placeholder="请输入备注" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>
		<uni-section title="照片上传" type="line">

			<view class="cu-form-group">
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="viewImage" :data-url="item">
						<image v-if="item" :src="item" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="delImg" :data-index="index">
							<uni-icons class="uni-icons-close" type="close" size="25"></uni-icons>
						</view>
					</view>
					<view class="bg-img-upload bg-img" @tap="chooseImage" v-if="imgList.length<9">
						<uni-icons class="uni-icons-upload" type="upload" size="30"></uni-icons>
					</view>
				</view>
			</view>
		</uni-section>
		<view class="button-group">
			<button type="primary" class="uni-btn bg-blue" @click="submit('valiForm')">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		addPhoto
	} from '@/api/record/photo.js'
	import {
		getDictDataList
	} from '@/api/system/dict.js'
	import {
		uploadImage,
		uploadFile,
		uploadFiles
	} from '@/api/system/file.js'
	import config from '@/config'
	export default {
		data() {
			return {
				dictPhotoType: [],
				recordPhoto: {
					photoType: "",
					name: ""
				},
				imgList: [],
				imgPathList: [],
				dictQuery: {
					pageNum: 1,
					pageSize: 100,
					dictType: "photo_type"
				},
				rules: {
					photoType: {
						rules: [{
							required: true,
							errorMessage: '请选择照片类型'
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '名称不能为空'
						}]
					},
					photoTime: {
						rules: [{
							required: true,
							errorMessage: '日期不能为空'
						}]
					}
				}
			}
		},
		onLoad() {
			this.getDict()
			this.recordPhoto.photoTime = Date.now();
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		watch: {
			imgPathList(newVal, oldVal) {
				if (newVal == oldVal) {
					return;
				}
				this.recordPhoto.imageUrl = "";
				for (var i = 0; i < newVal.length; i++) {
					this.recordPhoto.imageUrl += newVal[i] + ",";
				}
				if (this.recordPhoto.imageUrl.length > 0) {
					this.recordPhoto.imageUrl = this.recordPhoto.imageUrl.substring(0, this.recordPhoto.imageUrl.length -
						1);
				}
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					var that = this;
					addPhoto(that.recordPhoto).then(response => {
						console.log("addPhoto")
						that.$tab.switchTab("/pages/work/index").then(() => {
							uni.navigateTo({
								url: "/pages/package/work/photo/photo"
							});
						});
					});
				})
			},
			change(e) {
				console.log("e:", e);
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getDict() {
				var that = this;
				getDictDataList(that.dictQuery).then(response => {
					var temp = response.rows;
					console.log(temp)
					console.log(temp.length)
					for (var i = 0; i < temp.length; i++) {
						console.log(temp[i].dictValue)
						var item = {
							value: temp[i].dictValue,
							text: temp[i].dictLabel
						};
						that.dictPhotoType.push(item)
					}
					console.log("getDictDataList")
				});
			},
			chooseImage() {
				const _this = this
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (_this.imgList.length > 9) {
							return;
						}
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							let data = {
								name: 'file',
								filePath: res.tempFilePaths[i]
							}
							uploadFile(data).then(uploadFileRes => {
								if (_this.imgList.length > 9) {
									return;
								}
								_this.imgList = [..._this.imgList, config.baseUrl + uploadFileRes.fileName]
								_this.imgPathList = [..._this.imgPathList, uploadFileRes.fileName]
							});
						}
					}
				});
			},
			viewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			delImg(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							this.imgPathList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 20px;
	}

	.delete-btn {
		height: 37px;
		align-self: center;
		font-size: 13px;
	}

	.demo-uni-row {
		margin-bottom: 20px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 20px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 4px;
	}
	
	
	.button-group {
		margin-top: 15px;
		display: flex;
	    position: fixed;
		justify-content: space-around;
	    bottom: 0;
		.uni-btn {
			width: 750rpx;
			border-radius: 0;
		}
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.uni-icons-close,
	.uniui-close {
		color: #ffffff !important;
	}

	.bg-img-upload {
		border: 1px solid #0000004a;
		text-align: center;
		vertical-align: middle;
		line-height: 110px;
	}

	.uni-icons-upload,
	.uniui-upload {
		color: #0000004a !important;
		font-size: 30px !important;
	}
</style>